<template>
    <div class="container">
      <el-input 
        v-model="inputValue" 
        style="width:70%" 
        :placeholder="multipleBoxInfo.placeholder1" 
        maxlength="10000"
        :size="multipleBoxInfo.size"
        @blur="blur"
      />
      <el-tooltip 
        class="box-item" 
        effect="dark" 
        content="多个箱号的查询请在此输入" 
        placement="top"
      >
        <el-button 
          style="width:30%" 
          :size="multipleBoxInfo.size"
          @click="showDialog"
        >{{multipleBoxInfo.button}}</el-button>
      </el-tooltip>
  
      <el-dialog 
        v-model="dialogVisible" 
        :title="multipleBoxInfo.title" 
        width="60%"
      >
        <el-input 
          v-model="dialogInputValue" 
          type="textarea" 
          :placeholder="multipleBoxInfo.placeholder2" 
          :rows="15" 
        />
        <template #footer>
          <div class="dialog-footer">
            <el-button type="danger" plain @click="clear">清空</el-button>
            <el-button type="primary" @click="confirm">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
    import { ref, watch } from 'vue'
    
    interface Props {
      modelValue: string
      multipleBoxInfo?:object
    }
    
    interface Emits {
      (e: 'update:modelValue', value: string): void,
      (e: 'blur', value: string): void
    }    
    // const props = defineProps<Props>()
      const props = withDefaults(defineProps<Props>(), {
        multipleBoxInfo: () => ({// 设置默认值
          placeholder1: '请输入箱号', 
          title:'输入箱号',
          placeholder2:'请输入多个箱号以英文逗号分隔',
          button:'多箱号',
          size:'default'
        })
      })
    const emit = defineEmits<Emits>()
    
    const inputValue = ref<string>(props.modelValue)

    const dialogInputValue = ref<string>('')
    const dialogVisible = ref<boolean>(false)
    
    // 监听外部值变化
    watch(
      () => props.modelValue,
      (newVal: string) => {
        if(newVal){
           inputValue.value = newVal.trim().toUpperCase()
        }else{
           inputValue.value = null
        }
      }
    )
    
    // 监听内部值变化
    watch(
      inputValue,
      (newVal: string) => {
        if(newVal){
          emit('update:modelValue', newVal.trim().toUpperCase())
        }else{
          emit('update:modelValue', newVal)
        }
      }
    )
    
    const showDialog = (): void => {
      dialogInputValue.value = inputValue.value
      dialogVisible.value = true
    }
    
    const confirm = (): void => {
      inputValue.value = dialogInputValue.value
      emit('confirm', '')
      dialogVisible.value = false
    }

    const clear = (): void => {
      dialogInputValue.value = ''
    }

    const blur = (): void => {
      emit('blur', '')
    }

    </script>
  
  <style scoped>
  .container {
    display: flex;
    width: 100%;
    align-items: center;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  </style>